<template>
    <view class="title">
        <view class="title_left">
            <view class="goods_info">
                <text class="goods_info_name">{{ state.goodsName }}</text>
                <view v-if="state.from === 'integral'" class="goods_money">
                    <text v-if="state.minPoint">
                        <text class="price-qian"></text>
                        <text class="hotitem_text"> {{ minPointArr[0] }} </text>
                        <text class="price-dian" v-if="minPointArr[1]">.{{ minPointArr[1] }} </text>
                        <text class="jifen">元</text>
                        <text class="jifen" style="margin: 0 7rpx">+</text>
                    </text>
                    <text>
                        <text class="price-qian"></text>
                        <text class="hotitem_text"> {{ minPriceArr[0] }} </text>
                        <text class="price-dian" v-if="minPriceArr[1]">.{{ minPriceArr[1] }} </text>
                    </text>
                    <!-- <text v-if="!state.minPoint && state.minPrice !== state.maxPrice">
                        <text class="price-qian">~</text>
                        <text class="hotitem_text"> {{ maxPriceArr[0] }} </text>
                        <text class="price-dian" v-if="maxPriceArr[1]">.{{ maxPriceArr[1] }} </text>
                    </text> -->
                    <text class="jifen">积分</text>
                </view>
                <view
                    v-else-if="!state.activityId || state.activityType === 7 || state.activityType === 8"
                    class="goods_money">
                    <text>
                        <text class="price-qian">￥</text>
                        <text class="hotitem_text">
                            {{ minPriceArr[0] }}
                        </text>
                        <text class="price-dian" v-if="minPriceArr[1]">.{{ minPriceArr[1] }} </text>
                    </text>
                    <text v-if="state.minPrice != state.maxPrice">
                        <text> ~ </text>
                        <text class="hotitem_text">
                            {{ maxPriceArr[0] }}
                        </text>
                        <text class="price-dian" v-if="maxPriceArr[1]">.{{ maxPriceArr[1] }} </text>
                    </text>
                </view>
                <view v-if="[3, 4, 5].includes(state.activityType) && state.spellGroupNum > 0" class="group_num"
                    >{{ state.spellGroupNum }}人已团</view
                >
                <view class="goods_point" v-if="state.isPropReduce == 1">积分抵现</view>
            </view>
        </view>
        <view class="title_right">
            <view @tap="handleSharePopup" class="goods_btn u-reset-button">
                <view class="sharecontent">
                    <img class="goods_img" :src="getImgOssUrl('/ui-prod-2.0.0/share_1.1.png')" />
                    <view class="goods_title">分享</view>
                </view>
            </view>
        </view>
    </view>
    <SharePopup
        ref="sharePopupRef"
        :slotViews="slotViews"
        :pageInfo="{ pageTitle: '商品', linkPrefix: `【${state.goodsName}】` }"
        v-bind="$attrs">
        <template v-slot:context>
            <view class="custom-share-good-title">{{ state.goodsName }}</view>
            <view class="custom-share-good-desc">
                <!-- todo:优化下边重复的代码 -->
                <view v-if="state.from === 'integral'" class="custom-share-good-goods_money">
                    <text v-if="state.minPoint">
                        <text class="price-qian"></text>
                        <text class="hotitem_text"> {{ minPointArr[0] }} </text>
                        <text class="price-dian" v-if="minPointArr[1]">.{{ minPointArr[1] }} </text>
                        <text class="jifen">元</text>
                        <text class="jifen">+</text>
                    </text>
                    <text>
                        <text class="price-qian"></text>
                        <text class="hotitem_text"> {{ minPriceArr[0] }} </text>
                        <text class="price-dian" v-if="minPriceArr[1]">.{{ minPriceArr[1] }} </text>
                    </text>
                    <!-- <text v-if="!state.minPoint && state.minPrice !== state.maxPrice">
                        <text class="price-qian">~</text>
                        <text class="hotitem_text"> {{ maxPriceArr[0] }} </text>
                        <text class="price-dian" v-if="maxPriceArr[1]">.{{ maxPriceArr[1] }} </text>
                    </text> -->
                    <text class="jifen">积分</text>
                </view>
                <view
                    v-else-if="!state?.activityId || state?.activityType === 7 || state?.activityType === 8"
                    class="custom-share-good-goods_money">
                    <text>
                        <text class="custom-share-good-price-qian">￥</text>
                        <text class="custom-share-good-hotitem_text">
                            {{ minPriceArr[0] }}
                        </text>
                        <text class="custom-share-good-price-dian" v-if="minPriceArr[1]">.{{ minPriceArr[1] }} </text>
                    </text>
                    <text v-if="state.minPrice != state.maxPrice">
                        <text> ~ </text>
                        <text class="custom-share-good-hotitem_text">
                            {{ maxPriceArr[0] }}
                        </text>
                        <text class="custom-share-good-price-dian" v-if="maxPriceArr[1]">.{{ maxPriceArr[1] }} </text>
                    </text>
                </view>
                <template v-else>
                    <view
                        v-if="[2, 3, 4, 5].includes((state?.activityType || 0) / 1)"
                        class="custom-share-good-goods_money">
                        <text class="custom-share-good-price-qian">￥</text>
                        <text class="custom-share-good-hotitem_text">{{ minPriceArr[0] }}</text>
                        <text class="custom-share-good-price-dian" v-if="minPriceArr[1]">.{{ minPriceArr[1] }}</text>
                        <text class="custom-share-good-price-dian" v-if="state.minPrice != state.maxPrice">起</text>
                        <view v-if="state?.activityType == 2" class="custom-share-good-price-tag">秒杀价</view>
                        <view v-else class="custom-share-good-price-tag">拼团价</view>
                    </view>
                </template>
            </view>
        </template>
    </SharePopup>
</template>
<script setup>
import { getImgOssUrl } from '@/commons/utils';
import { ref, computed, reactive, watch } from 'vue';
import SharePopup from '@/components/sharePopup';
import { useTrace } from '@/commons/trace';

const { traceReport } = useTrace({ autoLoad: false });

const props = defineProps({
    data: Object
});
const state = reactive({
    minPrice: 0,
    maxPrice: 0,
    minPoint: 0,
    maxPoint: 0
});
const minPriceArr = computed(() => {
    return state.minPrice.toString().split('.');
});
const maxPriceArr = computed(() => {
    return state.maxPrice.toString().split('.');
});
const minPointArr = computed(() => {
    return state.minPoint.toString().split('.');
});
const shareList = computed(() => {
    return {
        link: {}
    };
});

const slotViews = height => {
    let price = '';
    if (state.from === 'integral') {
        if (state.minPoint) {
            price += (minPointArr.value[0] || '') + (minPointArr.value[1] ? `.${minPointArr.value[1]}` : '') + '元+';
        }
        price += (minPriceArr.value[0] || '') + (minPriceArr.value[1] ? `.${minPriceArr.value[1]}` : '') + '积分';
    } else if (!state.activityId || state.activityType === 7 || state.activityType === 8) {
        const minPriceArr2 = minPriceArr.value[1] ? `.${minPriceArr.value[1]}` : '';
        const maxPriceArr2 = maxPriceArr.value[1] ? `.${maxPriceArr.value[1]}` : '';
        const maxPriceArr3 = state.minPrice != state.maxPrice ? ` ~ ${maxPriceArr.value[0]}${maxPriceArr2}` : '';
        price = `￥${minPriceArr.value[0]}${minPriceArr2}${maxPriceArr3}`;
    } else {
        if ([2, 3, 4, 5].includes((state?.activityType || 0) / 1)) {
            const minPriceArr2 = minPriceArr.value[1] ? `.${minPriceArr.value[1]}` : '';
            const text = state.minPrice != state.maxPrice ? '起' : '';
            price = `￥${minPriceArr.value[0]}${minPriceArr2}${text}`;
        }
    }

    const views = [
        {
            type: 'text',
            content: state.goodsName,
            fontSize: 16,
            lineHeight: 22,
            color: '#333333',
            textAlign: 'left',
            top: height + 52,
            left: 15,
            width: 220,
            MaxLineNumber: 2,
            breakWord: true
        },
        {
            type: 'text',
            content: price,
            fontSize: 20,
            lineHeight: 14,
            color: '#FE292B',
            textAlign: 'left',
            top: height + 100,
            left: 15,
            MaxLineNumber: 1,
            breakWord: true
        }
    ];
    if ([2, 3, 4, 5].includes((state?.activityType || 0) / 1)) {
        views.push({
            type: 'roundRect',
            content: state?.activityType == 2 ? '秒杀价' : '拼团价',
            fontSize: 12,
            lineHeight: 17,
            color: '#FE292B',
            background: '#FFEDED',
            textAlign: 'left',
            top: height + 100,
            left: 15 + price.length * 12 + 8,
            width: 50,
            height: 22,
            radius: 10
        });
    }
    return views;
};
const sharePopupRef = ref();
const handleSharePopup = () => {
    const params = {
        productId: state.data.goodsId,
        productName: state.data.goodsName
    };
    traceReport('product_share', params);
    sharePopupRef?.value?.handlePopup();
};

watch(
    () => props.data,
    v => {
        Object.assign(state, v);
    },
    { immediate: true }
);
</script>
<style lang="scss" scoped>
.title {
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;

    .title_left {
        display: flex;
        align-items: center;
        .goods_info {
            padding-right: 45px;
            font-size: 29rpx;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            word-break: break-all;
            .goods_point {
                border-radius: 4rpx;
                border: 2rpx solid #fe292b;
                width: 109rpx;
                height: 36rpx;
                font-size: 22rpx;
                text-align: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fe292b;
                line-height: 36rpx;
            }
            .group_num {
                margin-top: 18rpx;
                font-size: 20rpx;
                font-weight: 400;
                color: #969696;
            }
            .goods_money {
                margin-top: 22rpx;
                font-size: 36rpx;
                color: #fe292b;
                line-height: 50rpx;
                font-weight: 600;
                font-family: PingFangSC-Medium, PingFang SC;

                .price-qian {
                    font-size: 24rpx;
                    font-weight: 500;
                }
                .price-qi {
                    font-size: 24rpx;
                    font-weight: 500;
                }
                .price-dian {
                    font-size: 26rpx;
                    font-weight: 500;
                }
            }
        }
    }
    .title_right {
        button::after {
            border: none;
        }
        .goods_btn {
            min-width: max-content;
            margin: 0;
            padding: 0;
            background-color: #fff;
            flex-shrink: 0;
            .goods_img {
                width: 32rpx;
                height: 32rpx;
            }
            .sharecontent {
                display: flex;
                flex-direction: column;
                align-items: center;
                .goods_title {
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #666666;
                    line-height: 32rpx;
                }
            }
        }
    }
    .jifen {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fe292b;
        line-height: 22rpx;
        margin-left: 4rpx;
    }
}
.custom-share-good {
    &-title {
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333333;
        display: -webkit-box; // 作为弹性伸缩盒子模型显示。
        overflow: hidden; // 溢出隐藏
        -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
        max-width: 380rpx;
        text-overflow: ellipsis; // 溢出用省略号显示
        word-break: break-all;
        font-weight: 400;
        -webkit-line-clamp: 2; // 显示的行数
        line-height: 40rpx;
        margin-bottom: 6rpx;
        min-height: 80rpx;
    }
    &-desc {
    }
    &-goods_money {
        font-size: 36rpx;
        color: #fe292b;
        font-weight: 600;
        font-family: PingFangSC-Medium, PingFang SC;
        display: flex;
        align-items: center;
    }
    &-price-qian {
        font-size: 36rpx;
        font-weight: 500;
    }
    &-price-qi {
        font-size: 36rpx;
        font-weight: 500;
    }
    &-price-dian {
        font-size: 36rpx;
        font-weight: 500;
    }
    &-price-tag {
        display: inline-block;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fe292b;
        font-size: 22rpx;
        background: #ffeded;
        border-radius: 24rpx;
        padding: 3.5rpx 16rpx;
        line-height: 31rpx;
        margin-left: 7.25rpx;
    }
}
</style>
